<template>
    <div id="GoodsManageList">
        <el-row>
            <el-col :xs="24" :sm="8" :md="6" :lg="6" :xl="6">
                <div class="grid-content bg-purple">
                    <el-dropdown @command="handleCommand">
                        <el-button type="primary">
                            搜索类别<i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="商品ID">商品ID</el-dropdown-item>
                            <el-dropdown-item command="商品名称">商品名称</el-dropdown-item>
                            <el-dropdown-item command="商品类别">商品类别</el-dropdown-item>
                            <el-dropdown-item command="商品状态">商品状态</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </el-col>
            <el-col :xs="24" :sm="16" :md="10" :lg="10" :xl="12">
                <div class="grid-content bg-purple-light">
                    <div>
                        <el-input placeholder="请输入内容" ref="content" v-model="searchContent">
                            <template slot="prepend"><span ref="contentType">商品ID</span></template>
                        </el-input>
                    </div>
                </div>
            </el-col>
            <el-col :xs="10" :sm="10" :md="4" :lg="4" :xl="6">
                <div class="grid-content bg-purple">
                    <el-button type="success" @click="search">搜索</el-button>
                </div>
            </el-col>
            <el-col :xs="10" :sm="10" :md="4" :lg="4" :xl="6">
                <div class="grid-content bg-purple">
                    <el-button type="info" @click="reset">重置</el-button>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <div class="grid-content bg-purple">
                    <GTable></GTable>
                    <Page></Page>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import GTable from '../components/ygr_goods/GTable.vue'
import Page from '../components/ygr_goods/Page.vue'
import { mapActions } from 'vuex'
export default {
    name: "GoodsManageList",
    components: {
        GTable,
        Page
    },
    data() {
        return {
            searchContent: '',
            type: 'goodsId'
        }
    },
    computed: {},
    methods: {
        ...mapActions(['getData']),
        handleCommand(command) { //切换搜索类别
            console.log(command);
            console.log(this.$refs.contentType.innerText)
            this.$refs.contentType.innerText = command;
            if (command == '商品ID') {
                this.type = 'goodsId'
            } else if (command == '商品名称') {
                this.type = 'goodsName'
            } else if (command == '商品类别') {
                this.type = 'goodsType'
            } else {
                this.type = 'state'
            }
        },
        search() { //搜索
            console.log(this.$store.state.goodsStore.tableList)
            console.log(typeof(this.$store.state.goodsStore.allList[0][this.type]))
            let sc = this.searchContent
            if (this.type == 'state') {
                if (sc == 'true') {
                    sc = true
                }
                if (sc == 'false') {
                    sc = false
                }
            }
            this.$store.state.goodsStore.allList = this.$store.state.goodsStore.allList.filter((item) => {
                return item[this.type] == sc
            })
        },
        reset() { //重置（重新获取请求数据列表）
            this.getData()
            this.searchContent=''//清空输入框内容
            this.$refs.contentType.innerText='商品ID'//默认根据ID值检索

        }

    },
    created() {}
}
</script>
<style scoped lang="less">
#GoodsManageList {
    // text-align: center;
    // line-height: 20;
}
</style>